<template>
  <div>
    <div class="account-card">
      <div class="avatar-box">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <div class="upload-tip">
          Allowed JPG, JPEG, GIF or PNG. Max size of 800KB
        </div>
      </div>
    </div>
    <div class="account-card">
      <el-form :model="form" label-width="80px" label-position="top">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="Username">
              <el-input v-model="form.username" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Email">
              <el-input v-model="form.email" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Phone">
              <el-input v-model="form.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Address">
              <el-input v-model="form.address" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="City">
              <el-input v-model="form.city" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Code">
              <el-input v-model="form.code" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="About">
              <el-input
                v-model="form.about"
                type="textarea"
                :rows="5"
                placeholder="Tell us about yourself"
              />
            </el-form-item>
          </el-col>
          <el-button color="#19af7d" class="save-btn">保 存</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";

const form = ref({
  username: "admin",
  email: "admin@qq.com",
  phone: "181******01",
  address: "fujian",
  city: "quanzhou",
  code: "181******01",
  about: "",
});

const imageUrl = ref("");

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (
    rawFile.type !== "image/jpeg" &&
    rawFile.type !== "image/jpg" &&
    rawFile.type !== "image/png" &&
    rawFile.type !== "image/gif"
  ) {
    return false;
  } else if (rawFile.size / 1024 > 800) {
    return false;
  }

  imageUrl.value = URL.createObjectURL(rawFile);
  return true;
};
</script>

<style scoped lang="scss">
.avatar-box {
  padding: 20px 0;
  text-align: center;

  .avatar-uploader {
    margin: 0 auto;
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 120px;
    height: 120px;
  }

  .avatar-uploader:hover {
    border-color: #5ec7a4;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .upload-tip {
    margin-top: 8px;
    font-size: 12px;
    color: #909399;
  }
}

.account-card {
  border-radius: 8px;
  padding: 24px;
  margin: 0 auto;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.save-btn {
  width: 150px;
  margin: auto;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}
</style>
